<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../imgs/favicon.ico" type="image/x-icon">
    <title>任务1：HTML</title>
</head>
<body>
    <h1>网站一级标题</h1>
    <ul>
        <li><a href="javascript:;">导航链接一</a></li>
        <li><a href="javascript:;">导航链接二</a></li>
        <li><a href="javascript:;">导航链接三</a></li>
        <li><a href="javascript:;">导航链接四</a></li>
    </ul>

    <h2>文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者 文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <img src="../imgs/placeholder.png" alt="占位图" title="占位图">
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>

    <h2>另一篇文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者 文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <img src="../imgs/placeholder.png" alt="占位图" title="占位图">
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
    </ul>
    <h2>图片</h2>
    <dl>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        <dt>好看的图片</dt>
        <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
    </dl>

    <h2>最后一篇文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者 文章发表时间</p>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
    <table border="1">
        <tr>
            <th>表头</th>
    		<th>表头</th>
    		<th>表头</th>
        </tr>
        <tr>
            <td>表内容单元格</td>
    		<td>表内容单元格</td>
    		<td><a href="javascript:;">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
    		<td>表内容单元格</td>
    		<td><a href="javascript:;">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
    		<td>表内容单元格</td>
    		<td><a href="javascript:;">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
    		<td>表内容单元格</td>
    		<td><a href="javascript:;">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
    </table>

    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <h2>侧栏注册窗口标题</h2>
    <form method="post" action="javascript:;">
        <p>邮箱地址请按要求格式输入</p>
    	<p>
            <label for="email">请输入邮箱地址：</label>
            <input id="email" type="email" placeholder="user@domain.com" name="email">
        </p>

        <p>密码请为 6-16 位英文数字</p>
    	<p>
            <label for="password">请输入密码：</label>
            <input id="password" type="password" placeholder="请最少输入 6 个字符" name="password">
            <label for="repeat-password">请重复输入密码：</label>
            <input id="repeat-password" type="password" placeholder="repeat password" name="repeat-password">
        </p>

    	<span>性别：</span>
        <input id="man" value="男" type="radio" name="gender" checked>
        <label for="man">男</label>
        <input id="woman" value="女" type="radio" name="gender">
        <label for="woman">女</label>

    	<label for="city">城市：</label>
        <select id="city" name="city">
            <option value="1" label="北京" selected>北京</option>
            <option value="2" label="上海">上海</option>
            <option value="3" label="广州">广州</option>
            <option value="4" label="深圳">深圳</option>
            <option value="5" label="杭州">杭州</option>
        </select>

    	<span>爱好：</span>
        <input id="sport" type="checkbox" name="sport">
    	<label for="sport">运动</label>
        <input id="art" type="checkbox" name="art">
    	<label for="art">艺术</label>
        <input id="science" type="checkbox" name="science">
    	<label for="science">科学</label>

    	<span>个人描述：</span>
    	<textarea id="detail" name="detail" wrap="hard" title="description" placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
    	<input type="submit" value="确认提交">
    </form>

    <footer>Copyright (c) 2018 Copyright Holder All Rights Reserved.</footer>
</body>
</html>
